import React from "react";
import { ButtonOptions, Button, Modal } from "../..";

export interface DialogOptions {
    afterClose?: Function; // 关闭后的回调
    beforeOpen?: Function; // 打开前的回调
    bodyStyle?: React.CSSProperties;
    cancelButtonOptions?: ButtonOptions;
    cancelButton?: React.ReactNode; // 取消按钮 children
    closable?: boolean; // 是否显示关闭按钮
    closeIcon?: React.ReactNode; // 自定义关闭按钮
    confirmLoading?: boolean;
    destroyOnClose?: boolean;
    footer?: React.ReactNode;
    esc?: boolean; // 是否支持键盘 esc 退出
    showModal?: boolean; // 是否显示模态框
    modalClosable?: boolean; // 是否支持通过模态框关闭
    modalColor?: string;
    modalClass?: string;
    okButtonOptions?: ButtonOptions;
    okButton?: React.ReactNode;
    title?: React.ReactNode;
    visible?: boolean;
    width?: number | string;
    onCancel?: Function;
    onOk?: Function;
    children?: React.ReactNode;
}

export default class Dialog extends React.Component<DialogOptions, any> {
    static defaultProps = {
        cancelButton: '取消',
        closable: true,
        closeIcon: <i className="r-icon-close-square" />,
        cancelButtonOptions: { type: 'danger' },
        confirmLoading: false,
        destroyOnClose: false,
        esc: true,
        showModal: true,
        modalClosable: true,
        okButtonOptions: { type: 'primary' },
        okButton: '确认',
        visible: false,
        width: 520,
    }

    constructor(props: DialogOptions) {
        super(props);
        this.state = {};
        const beforeOpen = props.beforeOpen
        if (beforeOpen) {
            beforeOpen()
        }
    }

    render() {
        const {
            bodyStyle, cancelButtonOptions, cancelButton, closable, closeIcon, confirmLoading, destroyOnClose, footer, esc, showModal, modalClosable, modalColor, modalClass, okButtonOptions, okButton, title, visible, width, onCancel, onOk, children
        } = this.props;
        const dialog = (
            <div className="r-dialog" style={{ width: width }}>
                <div className="r-dialog-header">
                    <div className="r-dialog-title">
                        {title}
                    </div>
                    {closable &&
                        <span className="r-dialog-close">{closeIcon}</span>
                    }
                </div>
                <div className="r-dialog-body" style={bodyStyle}>
                    {children}
                </div>
                <div className="r-dialog-footer">
                    {footer ? footer :
                        (
                            <>
                                <Button
                                    icon={cancelButtonOptions ? cancelButtonOptions.icon : undefined}
                                    onClick={() => {
                                        if (onCancel) {
                                            onCancel()
                                        }
                                        if (cancelButtonOptions && cancelButtonOptions.onClick) {
                                            cancelButtonOptions.onClick()
                                        }
                                    }}
                                    shape={cancelButtonOptions ? cancelButtonOptions.shape : undefined}
                                    type={cancelButtonOptions ? cancelButtonOptions.type : undefined}
                                    size={cancelButtonOptions ? cancelButtonOptions.size : undefined}
                                    loading={cancelButtonOptions ? cancelButtonOptions.loading : undefined}
                                    disabled={cancelButtonOptions ? cancelButtonOptions.disabled : undefined}
                                    arrow={cancelButtonOptions ? cancelButtonOptions.arrow : undefined}
                                    style={cancelButtonOptions ? cancelButtonOptions.style : undefined}
                                    className={cancelButtonOptions ? cancelButtonOptions.className : undefined}
                                >
                                    {cancelButton}
                                </Button>
                                <Button
                                    icon={okButtonOptions ? okButtonOptions.icon : undefined}
                                    onClick={() => {
                                        if (onOk) {
                                            onOk()
                                        }
                                        if (okButtonOptions && okButtonOptions.onClick) {
                                            okButtonOptions.onClick()
                                        }
                                    }}
                                    shape={okButtonOptions ? okButtonOptions.shape : undefined}
                                    type={okButtonOptions ? okButtonOptions.type : undefined}
                                    size={okButtonOptions ? okButtonOptions.size : undefined}
                                    loading={confirmLoading}
                                    disabled={okButtonOptions ? okButtonOptions.disabled : undefined}
                                    arrow={okButtonOptions ? okButtonOptions.arrow : undefined}
                                    style={okButtonOptions ? okButtonOptions.style : undefined}
                                    className={okButtonOptions ? okButtonOptions.className : undefined}
                                >
                                    {okButton}
                                </Button>
                            </>
                        )
                    }
                </div>
            </div>
        )
        let trueDialog;
        if (showModal) {
            if (modalClosable) {
                trueDialog = <Modal color={modalColor} className={modalClass} visible={visible} children={dialog} onClick={() => { this.closeDialog() }} />
            } else {
                trueDialog = <Modal color={modalColor} className={modalClass} visible={visible} children={dialog} />
            }
        } else {
            trueDialog = dialog;
        }
        if (esc) {
            trueDialog.props.onKeyUp = (key: KeyboardEvent) => {
                if (key.code === 'Escape') {
                    this.closeDialog()
                }
            }
        }
        if (destroyOnClose) {
            trueDialog = (
                <>
                    {destroyOnClose && visible &&
                        trueDialog
                    }
                </>
            )
        }
        return trueDialog
    }

    /**
     * @TODO: 需要定义关闭对话框的方法
     */
    closeDialog() {

    }

    componentWillUnmount() {
        const afterClose = this.props.afterClose
        if (afterClose) {
            afterClose();
        }
    }

}